<template>
<!-- 查看评价 -->
  <div>
  <van-nav-bar title="评论" left-arrow @click-left="onClickLeft" />
    <div>
      <div class="add"><van-icon name="notes-o" /> 订单详情</div>
      <van-field v-model="text" label="商品" />
      <van-field v-model="tel" type="tel" label="发货时间" />
      <van-field v-model="digit" type="digit" label="到达时间" />
    </div>
    <div class="add1">
      <div class="add"><van-icon name="notes-o" /> 服务评价</div>
      <van-row type="flex" justify="space-between">
        <van-col span="6">描述商品</van-col>
        <van-col span="12"
          ><van-rate
            v-model="prodConformityPoint"
            allow-half
            void-icon="star"
            void-color="#eee"
            size="0.3rem"
        /></van-col>
        <van-col span="6" style="color: #cccccc">{{ prodConformityPoint * 2 }}分数</van-col>
      </van-row>
      <van-row type="flex" justify="space-between">
        <van-col span="6">物流速度</van-col>
        <van-col span="12"
          ><van-rate
            v-model="logisticsSpeedPoint"
            allow-half
            void-icon="star"
            void-color="#eee"
            size="0.3rem"
        /></van-col>
        <van-col span="6" style="color: #cccccc">{{ logisticsSpeedPoint * 2 }}分数</van-col>
      </van-row>
      <van-row type="flex" justify="space-between">
        <van-col span="6">服务质量</van-col>
        <van-col span="12"
          ><van-rate
            v-model="serviceQualityPoint"
            allow-half
            void-icon="star"
            void-color="#eee"
            size="0.3rem"
        /></van-col>
        <van-col span="6" style="color: #cccccc">{{ serviceQualityPoint * 2 }}分数</van-col>
      </van-row>
    </div>
    <van-field 
        class="qwe"
      v-model="message"
      rows="1"
      autosize
      type="textarea"
      placeholder="请填写评价"
    />
    <!-- <div class="btn">
        <div class="btn-c" @click="pinLun">提交评论</div>
    </div> -->
  </div>
</template>

<script>
import {EvaluationDetails} from '../raxios/api'
export default {
  data() {
    return {
      text: "" || '一个很重要的东西',
      tel: "",
      digit: "",
      prodConformityPoint: 5,
      logisticsSpeedPoint: 5,
      serviceQualityPoint: 5,
      message: "",
    };
  },
  methods: {
    onClickLeft() {
       this.$router.go(-1)
    },
    
  },
  created(){
      EvaluationDetails({serialNo:this.$route.query.id},this.$route.query.id).then(res=>{
       this.text=res.data.prodName,
       this.tel=res.data.sendTime,
       this.digit=res.data.receiveTime,
       this.comment=res.data.message
       this.prodConformityPoint=res.data.prodConformityPoint
       this.logisticsSpeedPoint=res.data.logisticsSpeedPoint
       this.serviceQualityPoint=res.data.serviceQualityPoint
       this.message=res.data.comment

      })
      
    }

};
</script>
 
<style lang = "less" scoped>
.add{
    line-height: 0.35rem;
  background-color: #f5fafe;
  font-size: 0.16rem;
  color: #1c3c9f;
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
  .van-icon {
    font-size: 0.2rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
     }
}
.add1{
   width: 100%;
  background-color: #fff;
  .van-row {
    text-align: center;
    line-height: 0.5rem;
    .van-rate {
      box-sizing: border-box;
      margin-top: 0.1rem;
    }
     }
}
.add2{
     margin-top: 0.2rem;
  height: 1rem;
}
.btn{
 width: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
    margin-top: 0.1rem;
    background-color: #fff;
    .btn-c{
        line-height: 0.4rem;
        background-color: blue;
        border-radius: 0.2rem;
        text-align: center;
        color: white;
    }
}
</style>